<template>
  <div class="xjjlBox">
    <van-cell :title="fyInfo.roomName" value="" :label="fyInfo.placeInfo.placeName" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="margin-top: 12px; height: 70%; overflow-y: auto;"
    >
      <div class="cus-card" v-for="(item,index) in list" :key="index" :title="item" @click="goDetail(item.id)">
        <div class="time">{{ item.inspectionTime }}巡检记录</div>
        <div class="other-info">
          <div class="name">积分</div>
          <div class="score orangeColor">{{ item.score }}</div>
          <div class="name">挂牌</div>
          <div class="score blueColor">{{ item.cardType }}</div>
        </div>
      </div>
    </van-list>
    <van-button v-if="['游客', '业主', '协会'].indexOf(deptName) == -1" @click.prevent="addXjjl" class="fixed-button" round type="info" block>新增巡检</van-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { inspectionList } from '@/api/xjgl'
export default {
  name: 'xjjl',
  data() {
    return {
      loading: false,
      finished: true,
      list: [],
      role: window.localStorage.getItem('role'),
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      fyInfo: JSON.parse(window.localStorage.getItem('fyInfo'))
    }
  },
  created() {
  },
  computed: {
    ...mapGetters(['deptName']),
  },
  filters: {
  },
  mounted() {
    this.inspectionList()
    if(!this.fyInfo) {
      this.$store.dispatch('fyxx/getInfo', this.$route.query.id)
    }
  },
  methods: {
    onLoad() {
      if(this.total > this.params.pageNum * this.params.pageSize) {
        this.inspectionList()
      }
      this.loading = false
      this.finished = true
    },
    addXjjl() {
      window.localStorage.setItem('jkfmxList', '');
      window.localStorage.setItem('sjfkList', '');
      sessionStorage.clear();
      this.$router.push('/xjjl-add')
    },
    goDetail(id) {
      this.$router.push('/xjjl-detail?id=' + id)
    },
    inspectionList() {
      let params = this.params;
      params.placeCode = this.fyInfo.placeCode;
      inspectionList(params).then(res => {
        if(res.code == 200) {
          this.list = res.rows;
          this.total = res.total;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.xjjlBox {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #F5F5F5;
  /deep/ .van-cell__title {
    text-align: left;
  }
  .cus-card {
    border-radius: 9px;
    background: #FFFFFF;
    margin: 12px 16px;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    .time {
      color: #969799;
      font-size: 14px;
      letter-spacing: 0px;
      text-align: left;
      font-weight: normal;
    }
    .other-info {
      display: flex;
      align-items: center;
      font-size: 14px;
      .name {
        color: #333333;
        line-height: 24px;
        letter-spacing: 0px;
        text-align: left;
        margin-right: 16px;
        margin-top: 8px;
      }
      .score {
        width: calc(48% - 50px);
        text-align: left;
        margin-top: 8px;
      }
      .orangeColor {
        color: #FF5B05;
      }
      .blueColor {
        color: #1677FF;
      }
    }
  }
  .fixed-button {
    position: fixed;
    width: calc(100% - 32px);
    left: 16px;
    bottom: 40px;
    cursor: pointer;
  }
}

</style>